<template>
  <div class="app-container">
    <div class="flex">
    <div class="g-card fxauto">
      <el-form
        :model="form"
        label-width="140px">
        <el-form-item label="协议名称:">
          <el-input v-model="form.agreementName" placeholder="请输入名称" show-word-limit maxlength="15"></el-input>
          
        </el-form-item>
        <el-form-item label="协议内容:" prop="content">
        <editor id="tinymce" v-model="form.content" :init="init"></editor>
        <div v-html="form.content"></div>
        </el-form-item>
        
      </el-form>
    </div>
    <div class="fxnone g-margin-l" v-if="isDetail">
      <CodeLink :data="form" />
    </div>
  </div>
    
  </div>
  <div class="g-footer-sticky" v-if="!isDetail">
    <el-button @click="$router.back()">取消</el-button>
    <el-button type="primary" @click="submit">确定</el-button>
  </div>
</template>
<script setup>

import { saveAgreement } from '@/api/drainageCode/pullNews'
import { ref, onMounted } from "vue";
import tinymce from "tinymce/tinymce";
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
// 都是富文本插件
import "tinymce/icons/default";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";


// 以上所有的样式在 node_modules 下面 tinymce 里面的 plugins 都能找到。
const tinymceHtml = ref("请输入内容");
const init = {
  //初始化数据
  language_url: "/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
  language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
  skin_url: "/skins/ui/oxide", // 这里引入的样式
  height: 600, // 限制高度
  plugins: "link lists image code table wordcount", // 富文本插件
  toolbar:
    "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | code | removeformat",
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  content_css: "/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  images_upload_handler: (blobInfo,success, failure) => {
          // console.log(blobInfo.blob());
          // 上传图片需要，FormData 格式的文件；
          const formDataUp = new FormData();
         // img  是接口需要的上传的属性名，一般属性名是 file
          formDataUp.append("img", blobInfo.blob());
          // // console.log(formDataUp);
          axios.post("xxxx", formDataUp).then((res) => {
              success("返回的上传图片后的地址");
            });
          }
    };
onMounted(() => {
  tinymce.init({}); // 初始化富文本
});
const form = {
        agreementName: '',
        content: '请输入内容1'
      };

  const submit = () => {
    saveAgreement(form)
            .then((res) => {
              this.msgSuccess('操作成功', res)
            })
            .finally(() => {
              this.$store.loading = false
            })
  }
</script>


<style scoped lang="scss">
.sub-des {
  font-size: 12px;

  font-weight: 400;
  color: var(--font-black-6);
}
::v-deep .image-uploader {
  .uploader-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }

  .upload-img {
    width: 80px;
    height: 80px;
  }
}

::v-deep .image-uploader2 {
  .uploader-icon {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
  .upload-img {
    width: 120px;
    height: 120px;
  }
}
</style>